<template>
    <div style="padding-left:5px;">
<!--        {{colorArr}}-->
        <el-row>
            <el-col align="left">
                <el-form label-width="60px" label-position="top">
                    <el-form-item label="分配：">
                        <el-table size="mini"
                                  :data="colorArr"
                                  style="width: 100%">
<!--                            <el-table-column-->
<!--                                    type="index"-->
<!--                                    width="50">-->
<!--                            </el-table-column>-->
                            <el-table-column label="颜色" min-width="5">
                                <template slot-scope="scope">
<!--                                    <el-input v-model="scope.row.code"  @input="refreshData" ></el-input>-->
                                    <el-color-picker v-model="scope.row.code"   @change="refreshData"></el-color-picker>

                                </template>
                            </el-table-column>
                            <el-table-column label="大小" min-width="8">
                                <template slot-scope="scope">
                                    <el-input-number v-model="scope.row.value" :min="1" :max="100" :step="10" @change="refreshData" ></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" min-width="4">
                                <template slot-scope="scope">
                                    <el-button style="margin-left:20px;" icon="el-icon-delete" @click="delColor(scope.$index)"></el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                        <el-row>
                            <el-col align="center">
                                <el-button  type="primary" @click="addColor()">添加</el-button>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="速度：">
                        <el-input-number v-model="speed" :min="1" :max="10000" :step="1"></el-input-number>
                    </el-form-item>
                    <el-form-item label-width="0" style="padding-left: 10px;">
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col align="left">
                <el-button type="primary" @click="start" v-if="paused">开始</el-button>
                <el-button type="primary" @click="pause" v-else>暂停</el-button>
            </el-col>
        </el-row>
        <div style="padding-left:10px;">
            <v-stage ref="stage" :config="stageSize" >
                <v-layer ref="layer">


                    <v-wedge v-for="(record, index) in colorArr" :key="'color_' + index" :config="{
                    x: initX,
                    y: initY,
                    radius: radius,
                    angle: record.angle,
                    fill: record.code,
                    stroke: record.code,
                    strokeWidth: 1,
                    rotation: record.rotation,
                  }"/>

                    <v-wedge ref="wedge1" :config="{
                  }"/>

                    <v-line :config="{
                    x: initX,
                    y: initY,
                    points: [0, 0, 200, 0],
                    strokeWidth: 5,
                    stroke: 'black',
                  }"/>

                </v-layer>
            </v-stage>
        </div>
    </div>

</template>

<script>
    import Konva from "konva";
    const width = window.innerWidth - 50;
    const height = 500;

    export default {
        data() {
            return {
                colorArr: [{
                    code: '#20AE56',
                    value: 10,
                    angle: null,
                    rotation: null,
                    ratio: null,
                },{
                    code: '#E40F0F',
                    value: 10,
                    angle: null,
                    rotation: null,
                    ratio: null,
                },{
                    code: '#CA12CD',
                    value: 10,
                    angle: null,
                    rotation: null,
                    ratio: null,
                },],
                initX: 200,
                initY: 200,
                radius: 100,
                speed: 1,
                rotation1: 0,
                rotation2: 120,
                rotation3: 240,
                windowInnerWidth: 0,
                stageSize: {
                    width: width,
                    height: height
                },
                anim: null,
                paused: true,
            };
        },
        methods: {
            start() {
                this.paused = false
                this.anim.start();
            },
            pause() {
                this.paused = !this.paused
            },
            renderResize() {
                this.windowInnerWidth = window.innerWidth - 50;
            },
            addColor() {
                this.colorArr.push({
                    code: null,
                    value: 10,
                    angle: null,
                    rotation: null,
                    ratio: null,
                })
            },
            delColor(index) {
                this.colorArr.splice(index, 1)
                this.refreshData()
            },
            refreshData() {
                // console.log('refreshData this.colorArr:', this.colorArr)
                let sum = 0
                this.colorArr.forEach(c => {
                    sum += c.value
                })

                let currentRotation = 0
                this.colorArr.forEach(c => {
                    c.ratio = sum ? c.value / sum : 0
                    c.angle = 360 * c.ratio
                    c.rotation = currentRotation
                    currentRotation += c.angle
                })
            },
        },
        computed: {
        },
        mounted() {
            this.windowInnerWidth = window.innerWidth
            const vm = this;
            window.addEventListener("resize", this.renderResize, false)

            const wedge1 = this.$refs.wedge1.getNode();
            this.anim = new Konva.Animation(function() {
                if(!vm.paused) {
                    vm.colorArr.forEach(c => {
                        c.rotation += vm.speed
                    })
                }
            }, wedge1.getLayer());

            // setTimeout(() => {
                vm.refreshData()
            // }, 1000)

        }
    };
</script>
